<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>

<!--  jquery -->
<script src="../js/jquery-1.8.1.js"></script>



    <script src="../ui/jquery.ui.core.js"></script>
	<script src="../ui/jquery.ui.widget.js"></script>
	<script src="../ui/jquery.ui.mouse.js"></script>
	<script src="../ui/jquery.ui.draggable.js"></script>
	<script src="../ui/jquery.ui.sortable.js"></script>
	
	<link href="../css/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
	$(document)
			.ready(
				function() {
					var buildlist;
					 buildlist = "<ul id=\"sortable\">";
					 // inital post start
					 
						$.post("../connectors/milestoneConnector.jsp",  function(data) {
								  $.each(data, function(index, element) {
										 buildlist = buildlist + "<li id='listtasks_"+data[index].mileStoneID+"'>"+data[index].mileStoneName+"<div id='listtasks_"+data[index].mileStoneID+"'><pre class=\"brush:xml\">"+data[index].mileStoneXML+"</pre></div></li>";
            						});
            												    buildlist = buildlist + "</ul>";
					       $("#listdiv").html(buildlist);
						$( "#sortable" ).sortable();
						$( "#sortable" ).disableSelection();
            						  SyntaxHighlighter.all();
						    } );
				
				 // flow button code starts     
				 $( "#flowid").click(function(){
				 
				 	var result = $('#sortable').sortable('toArray');
				 	alert(result);
				 			 
				 		 					});
				 
				 		 					
				// document ready ends below-----------
				 	});
						

</script>


<script>
	
	</script>
	
	<style>
  ul { width: 300px; list-style: none; margin: 0; padding: 0; }
  li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
  li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
  .ui-selecting { background: #eee; }
  .ui-selecting .handle { background: #ddd; }
  .ui-selected { background: #def; }
  .ui-selected .handle { background: #cde; }

</style>
	
	
	<!-- Include required JS files -->
<script type="text/javascript" src="../js/shCore.js"></script>
 
<!--
    At least one brush, here we choose JS. You need to include a brush for every
    language you want to highlight
-->
<script type="text/javascript" src="../js/shBrushXml.js"></script>
 
<!-- Include *at least* the core style and default theme -->
<link href="../css/shCore.css" rel="stylesheet" type="text/css" />
<link href="../css/shThemeDefault.css" rel="stylesheet" type="text/css" />

<!-- You also need to add some content to highlight, but that is covered elsewhere. -->



</head>
<body>



<div id="listdiv">
</div>

<input type="button" value="flow" id="flowid" />
<pre class="brush:xml">
<atsxml>
<rot>data</rot>
<k>hhh</k>
</atsxml>
</pre>

</body>
</html>